<template>
<div class="project">
    <el-row :gutter="20">
        <el-col :span="isMobile ? 24 : 12">
            <div @click="toResume">
                <el-card>
                    <img src="../assets/obj0.png" alt="" />
                    <div>
                        <p class="title">个人简历</p>
                        <p class="date">2020-09-22</p>
                    </div>
                </el-card>
            </div>
        </el-col>
        <el-col :span="isMobile ? 24 : 12">
            <a href="https://gitee.com/yj2734336425">
                <el-card>
                    <img src="../assets/obj1.png" alt="" />
                    <div>
                        <p class="title">个人项目</p>
                        <p class="date">2020-09-22</p>
                    </div>
                </el-card>
            </a>
        </el-col>
    </el-row>
</div>
</template>

<script>
import {
    isMobileOrPc
} from "../utils/utils.js";
export default {
    data() {
        return {
            isMobile: isMobileOrPc()
        };
    },
    methods: {
        toResume() {
            this.$router.push("/resume");
        }
    }
};
</script>

<style lang="less" scoped>
.el-card {
    box-shadow: none;

    img {
        width: 100%;
    }

    div {
        margin-left: 10px;

        .title {
            font-size: 25px;
            font-weight: 550;
        }
    }
}

.el-card:hover {
    box-shadow: 3px 3px 7px 1px rgba(0, 0, 0, 0.3);
}

a {
    text-decoration: none;
}
</style>
